<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
          <!-- 输入框 -->
          <el-form-item label="销售商家名称">
            <el-input v-model="searchFilters.merchantName" placeholder="销售商家名称"></el-input>
          </el-form-item>
          <el-form-item label="销售店铺名称">
            <el-input v-model="searchFilters.storeName" placeholder="销售店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="订单编号">
            <el-input v-model="searchFilters.orderNumber" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="父订单编号">
            <el-input v-model="searchFilters.orderParentNumber" placeholder="父订单编号"></el-input>
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input v-model="searchFilters.clientName" placeholder="客户名称"></el-input>
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item label="销售渠道">
            <el-select v-model="searchFilters.saleChannel" placeholder="销售渠道">
              <el-option
                v-for="item in saleChannelOption"
                :key="item.code"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源终端">
            <el-select v-model="searchFilters.terminal" placeholder="来源终端">
              <el-option
                v-for="item in terminalOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="searchFilters.orderType">
              <el-option
              v-for="item in orderTypeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 时间选择器部分 -->
          <el-form-item label="订单日期">
            <el-date-picker type="date" v-model="searchFilters.data"></el-date-picker>
          </el-form-item>
          <el-form-item label="订单时间区间" class="el-dater">
            <el-time-picker v-model="searchFilters.startTime"></el-time-picker>
            <span>-</span>
            <el-time-picker v-model="searchFilters.endTime"></el-time-picker>
          </el-form-item>
        </el-form>
      </div>
      <!-- 左侧查询重置  右侧刷新 导出部分 -->
      <div class="tool-wrap">
        <div class="left-area">
          <el-button-group>
            <el-button type="primary" size="small" @click="queryData('searchFilters')">查询</el-button>
            <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
            <el-button type="primary" size="small" @click="add()">新增弹窗按钮</el-button>
          </el-button-group>
        </div>
        <div class="right-area">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button  size="small" icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button  size="small" icon="fa fa-filter" @click="tabulate"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button  size="small" icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
        <jic-table
          :height="350"
          :operationWidth= 400
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :customLabel="customLabel"
          :showEditOperation=true
          :showDeleteOperation=true
          :showDetailOperation=true
          :showCustomOperation=true
          @findPage="findPage"
          @handleEdit="handleEdit"
          @handleDelete="handleDelete"
          @handleDetail="handleDetail"
          @handleCustom="handleCustom"
          @handleBatchDelete="handleBatchDelete"
          @selectionChange="selectionChange"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
      <!-- 新增弹窗他部分 -->
      <div class="dialog-wrap">
        <el-dialog
          width="50%"
          title="弹窗名称"
          :visible.sync="dialogVisible"
          :before-close="handleClose">
          <!-- 自定义页面内容开始 -->
          <span style="color: red;font-size: 20px">在这里填充页面的布局内容,包括是否显示底部的取消 确定按钮</span>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
          <!-- 自定义页面内容结束 -->
        </el-dialog>
      </div>

    </div>
  </div>
</template>
<script>
  // 引入资源
  import jicTable from './jicTable';      // 引入表格组件

  export default {
    // 注册组件
    components: {
      jicTable,
    },

    data(){
      return {
        customLabel: '我的按钮',                      // 自定义按钮名称
        totalSize: 0,                                // 返回数据总条数
        pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
        tableList: [],                               // 表格列表数据
        searchSize: 'mini',                          // 用于控制该表单域下组件的尺寸   可选值为medium(中等)  small(小号)   mini(最小号)

        // 表格表头数据
        tableHeaderList: [
          { prop: "id", label: "ID", minWidth: 50 },
          { prop: "roleName", label: "角色名", minWidth: 120 },
          { prop: "remark", label: "备注", minWidth: 120 },
          { prop: "type", label: "所属平台", minWidth: 120 ,formatter:function(row, column, cellValue, index){
              if(cellValue == 0){
                return "运营平台";
              }else if(cellValue == 1){
                return "商家平台";
              }else if(cellValue == 2){
                return "供应商平台";
              }else{
                return "未知平台";
              }
          }},
          { prop: "createTime", label: "创建时间", minWidth: 120 }
        ],

        // 搜索表单对应的数据对象
        searchFilters: {
          merchantName: '',            // 商家名称
          storeName: '',               // 店铺名称
          orderNumber: '',             // 订单编号
          orderParentNumber: '',       // 父订单编号
          clientName: '',              // 客户名称
          saleChannel: '',             // 下单渠道
          orderType: '',               // 订单类型
          data: '',                    // 日期
          startTime: '',               // 开始时间
          endTime: '',                 // 结束时间
        },
        // 销售渠道对应的下拉框数据
        saleChannelOption: [
          {
            label: '京东',
            value: 'jd',
          },
          {
            label: '天猫',
            value: 'tm',
          },
          {
            label: '淘宝',
            value: 'tb',
          }
        ],
        // 销售终端对应的下拉框数据
        terminalOption: [
          {
            label: 'PC',
            value: 'pc',
          },
          {
            label: 'H5',
            value: 'h5',
          },
          {
            label: 'IOS',
            value: 'ios',
          },
          {
            label: 'Android',
            value: 'android',
          }
        ],
        // 订单类型下拉框对应的数据
        orderTypeOption: [
          {
            label: '普通订单',
            value: 'normal',
          },
          {
            label: '虚拟订单',
            value: 'virtual',
          },
        ],
        dialogVisible: false,          // 是否显示弹窗内容
      }
    },

    methods: {

      // 请求列表数据
      findPage(pageNum) {
        // 传过滤器的参数
        let this_ = this;
        if (this_.searchFilters == undefined || this_.searchFilters == null) {
          this_.searchFilters = {};
        }
        this_.searchFilters.start = this.pageRequest.pageNum;
        this_.searchFilters.limit = this.pageRequest.pageSize;
        this.utils.request.queryPageSysRole(this_.searchFilters, function (res) {
          if (res.data == null) {
            res.data = [];
          }
          this_.tableList = res.data;
          this_.totalSize = Number(res.totle);
        });

      },

      // 查询
      queryData() {
        alert('查询');
      },

      // 重置
      resetForm() {
        alert('重置');
      },

      // 列表显示
      tabulate() {
        alert('列表显示');
      },

      // 导出数据
      downloadExcel() {
        alert('导出数据');
      },

      // 编辑按钮对应的方法
      handleEdit(params){
        console.log(params, '-------------父页面编辑按钮------------');
      },

      // 删除按钮对应的方法
      handleDelete(params) {
        console.log(params, '-------------父页面删除按钮------------');
      },

      // 详情按钮对应的方法
      handleDetail(params) {
        console.log(params, '-------------父页面详情按钮------------');
      },

      // 自定义按钮对应的方法
      handleCustom(params) {
        console.log(params, '-------------父页面自定义按钮------------');
      },

      // 批量删除方法
      handleBatchDelete(params) {
        console.log(params, '-------------父页面批量删除------------');
      },

      // 选择项发生变化的时候触发
      selectionChange() {

      },

      // 请求条数发生变化
      handleSizeChange(params) {
        console.log(params.size, '-------------父页面请求条数发生变化------------');
        this.pageRequest.pageSize = params.size;
      },

      // 请求页数发生变化
      handlePageChange(params) {
        console.log(params.number, '-------------父页面请求页数发生变化------------');
        this.pageRequest.pageNum = params.number
        this.findPage();
      },

      // 页面弹窗处理方法
      add() {
        this.dialogVisible = true;
      },

      // 关闭弹窗
      handleClose() {
        this.dialogVisible = false;
      },

    },

    // dom元素绑定后再执行初始化数据操作
    mounted() {
      // 请求数据
      this.findPage();
    },

  }
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;
    .search-wrap /deep/ {
      .el-form-item__label{
        height: 32px;
        line-height: 32px;
      }
      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }
      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }
      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }
    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content{
      width: 330px;
    }
    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;
      .left-area {
        float: left;
        width: 50%;
        text-align: left;
        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }
      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }
    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }
    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer{
      text-align: center !important;
    }
  }
</style>

